<template>
    <div>
        <el-card>
<!--            <el-input autofocus class="input" placeholder="请输入要查询的名字"-->
<!--                      v-model="inputIndex">-->
<!--            </el-input>-->

            <el-table :data="tableData" border class="table" max-height="800" ref="singleTable"
                      header-cell-class-name="table-header">
                <el-table-column type="index" label="序号" width="55" align="center"></el-table-column>
                <el-table-column prop="callName" label="呼叫" align="center"></el-table-column>
				<el-table-column prop="calledName" label="被呼叫" align="center"></el-table-column>
                <el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
                <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
                <el-table-column prop="duration" label="通话时长" align="center"></el-table-column>
                <el-table-column prop="status" label="通话状态" align="center">
					<template #default="scope">
						<el-tag v-if="scope.row.status==='未接听'" type="warning">未接听</el-tag>
						<el-tag v-else>已接听</el-tag>
					</template>
				</el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import {reactive, ref} from "vue";
import {deviceId} from "../utils/websocket";
import {getCallRecord} from "../api/call";
import {ElMessage} from "element-plus";

export default {
    name: "CallRecord",

    setup() {
        const tableData = ref([]);
        const getData = () => {
            let form=reactive({"deviceId":deviceId, "limit": 30})
            getCallRecord(form).then((res) => {
				console.log(res)
                if (res.code === 0) {
					let temp = res.data.slice(0,30)
					tableData.value = temp;
                } else {
                    ElMessage.error('查询失败，请稍后重试！');
                }
            });
        };
        getData();
        return {tableData};
    },
};
</script>
